<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>{{isEdit ? '编辑菜单' : '新增菜单'}}</span>
    </div>
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="菜单名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="菜单路径">
        <el-input v-model="form.href"></el-input>
      </el-form-item>

      <el-form-item label="上级菜单">
        <el-select v-model="form.parentId" placeholder="请选择上级菜单">
          <!-- 无上级菜单 -->
          <el-option
            label="无上级菜单"
            :value="-1"
          ></el-option>
          <!-- 选择一级菜单 -->
          <el-option
            v-for="item in parentMenuList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="描述">
        <el-input v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item label="前端图标">
        <el-input v-model="form.icon"></el-input>
      </el-form-item>
      <el-form-item label="是否显示">
        <el-radio v-model="form.shown" :label="true">是</el-radio>
        <el-radio v-model="form.shown" :label="false">否</el-radio>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="form.orderNum" :min="1"></el-input-number>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button v-if="!isEdit" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
  import { getEditMenuInfo, saveOrUpdate } from '@/services/menu'

  export default {
    name: 'create-or-edit',
    props: {
      isEdit: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        form: {
          name: '',
          href: '',
          parentId: -1,
          description: '',
          icon: '',
          shown: false,
          orderNum: 0,
        },
        parentMenuList: [],
        rules: {
          name: [
            { required: true, message: '请输入菜单名称', trigger: 'blur' },
          ],
          href: [
            { required: true, message: '请输入菜单路径', trigger: 'blur' },
          ],
          icon: [
            { required: true, message: '请输入前端图标', trigger: 'blur' },
          ]
        },
      }
    },
    created() {
      this.getEditMenuInfo()
    },
    methods: {
      async getEditMenuInfo() {
        const id = this.$route.params.id || -1
        const { data } = await getEditMenuInfo(id)
        this.parentMenuList = data.parentMenuList
        if (data.menuInfo) {
          this.form = data.menuInfo
        }
      },
      async onSubmit() {
        try {
          await this.$refs.form.validate()
          const { code, mesg } = await saveOrUpdate(this.form)
          if (code === '000000') {
            this.$message.success('提交成功')
            this.$router.push({
              name: 'menu'
            })
          } else {
            this.$message.success(mesg)
          }
        } catch (e) {

        }
      },
      reset() {
        this.form = {
          name: '',
          href: '',
          parentId: -1,
          description: '',
          icon: '',
          shown: false,
          orderNum: 0,
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
